延續上一篇 DAY23 的 React-router-dom 繼續往下介紹，
如果沒看過的朋友，建議可以先看上一篇哦！

本篇將介紹

• 動態路由參數
• 當前路由資訊
• 切換頁面 Scroll To Top

1.動態路由參數

useParams()

<BrowserRouter>
  <Routes>
    <Route path="/product/:id" element={<Product/>} />
  </Routes>
</BrowserRouter>;

import { useParams } from "react-router-dom";

const Product = () => {
  const params= useParams();

  return (
    <h1>{params.id}</h1>
 );
}

export default Product;

當 router 是動態路由時，useParams 可以取得 url 的 params

useSearchParams()

import { useSearchParams } from "react-router-dom";

const Product = () => {
  const [searchParams, setSearchParams] = useSearchParams();

  console.log(searchParams.get("id")); // 12
  console.log(searchParams.getAll("id")); // [12]

  const changeSearchParams = () => {
    setSearchParams({
      name: "foo",
      id: "456"
    });
  };

  return (
    <div>
      <h2>searchParams:</h2>
      <div>{searchParams.get("id")}</div>
      <button className="btn" onClick={changeSearchParams}>
        change Search Params
      </button>
    </div>
  );
};

export default Product;

可查找或設定 Query String 問號後面的 params，用法跟 useState() 一樣

如當前路徑為 /product?id=12

打開 codesandbox 程式碼範例 看看動態路由參數的用法吧！

2.當前路由資訊

useLocation

import { useLocation } from "react-router-dom";
let location = useLocation();
console.log(location);

獲取當前 url 的各種屬性，你可以得到以下資訊

{
  pathname: "/hello/world",
  search: "?filter=123",
  hash: "#menu",
  state: null,
  key: "12345"
}

• pathname：URL 路徑
• search：Query String Params
• hash：用於確定頁面滾動的具體位置
• state：對於 window.history.state 的包裝
• key：每個 Location 對象擁有一個唯一的 key，可以實現數據緩存

打開 codesandbox 程式碼範例 看看當前路由資訊的用法吧！

3.切換頁面 Scroll To Top

當在一個頁面將卷軸往下滾動，切換頁面後，會發現卷軸的位置還是在上個頁面切換的位置
就會像 codesandbox 程式碼範例 這樣

因為 SPA 滾動並不會重新改變卷軸位置，我們需要自行再做 Scroll to top 的設定

新增一個 ScrollToTop

helpers/ScrollToTop.js

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

export default function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

每當路由 pathname 改變時，卷軸就會回到頂部

App.js

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Header from "./components/Header";
import Home from "./pages/Home";
import Page1 from "./pages/Page1";
import Page2 from "./pages/Page2";
import NotFound from "./pages/NotFound";
import ScrollToTop from "./helpers/ScrollToTop";

export default function App() {
  return (
    <BrowserRouter>
      <Header />
      <ScrollToTop />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="page1" element={<Page1 />} />
        <Route path="page2" element={<Page2 />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

ScrollToTop 引入並放在 BrowserRouter 裡，就大功告成囉！
打開 codesandbox 程式碼範例 一起試看看吧！

結語

路由的設定對 SPA 網站也是很重要的一環，路由的講解在這篇告一段落，其實不是太難，基本上學會這些就很夠用了，花一點時間來練習看看吧！

本文將同步更新至我的部落格
Lala 的前端大補帖